<template>
    <div>
        <div class="right-body">
            <div class="operation-layout">
                <div class="operation-list">
                    <ul>

                        <li :class="[activeIndex == 0 ? 'active' : '']" @click="activeIndex = 0,goOut()">
                            <a>送出的礼物</a>
                            <div class="after"></div>
                        </li>
                        <li :class="[activeIndex == 1 ? 'active' : '']" @click="activeIndex = 1,commIn()">
                            <a>收到的礼物</a>
                            <div class="after"></div>
                        </li>


                    </ul>
                </div>
            </div>

            <!-- gGift begin -->
            <div class=" Gift-view-layout">
                <table>
                    <thead>
                        <tr>
                            <th>礼物</th>
                            <th v-if="activeIndex == 0">接收人</th>
                            <th v-else>赠送人</th>
                            <th>价格</th>
                            <th>数量</th>
                            <th>时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in giftList" :key="index">
                            <td>
                                <img :src="$imgPath(item.gift.image)">
                                <label>{{item.gift.name}}</label>
                            </td>
                            <td v-if="activeIndex == 0">
                                <img class="user" :src="$imgPath(item.toUser.headImg)">
                                <label>{{item.toUser.nickname}}</label>
                            </td>
                            <td v-else>
                                <img class="user" :src="$imgPath(item.user.headImg)">
                                <label>{{item.user.nickname}}</label>
                            </td>
                            <td>{{item.gift.price}}</td>
                            <td>{{item.count}}</td>
                            <td>{{$time1(item.createTime)}}</td>
                        </tr>
                   
                    </tbody>
                </table>


                <!--page  begin-->
                <div class="page-layout">
                    <Page :total="totalElements" show-elevator  @on-change="change" />
                </div>
                <!--page  end-->
            </div>
            <!-- coupon end -->
        </div>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
export default {
    data(){
        return{
            giftList:[],            // 礼物列表
            totalElements:0,       // 礼物总数量
            page:0,                 // 页码
            activeIndex:0,          // 切换
        }
    },
    mounted(){
        if(this.activeIndex == 0){
            this.goOut()
        }else{
            this.commIn()
        }
    },
    methods:{
        // 我收到的
        commIn(){
            let params = {
                page:this.page,
                size: 10,
            }
            apiHttp.apiCenter.getGiftUserByToUserId(params,resp=>{
                if(resp.code == 200){
                    this.totalElements = resp.data.totalElements
                    this.giftList = resp.data.content
                }
            })
        },
        // 我送出的
        goOut(){
            let params = {
                page:this.page,
                size: 10,
            }
            apiHttp.apiCenter.getGiftUserByFormUserId(params,resp => {
                if(resp.code == 200){
                    this.totalElements = resp.data.totalElements;    
                    this.giftList = resp.data.content
                }
            })
        },
        // 分页
        change(index){
            this.page = index - 1
            if(this.activeIndex == 0){
                this.goOut()
            }else{
                this.commIn()
            }
        }
    }
}
</script>

